<template>
  <v-card>
    <v-card-title>
      <div class="d-flex align-center">
        <v-chip color="info" small>未出团</v-chip>
        <span>WG20200802-9</span>
        <span> - </span>
        <span>(4N5D)</span>
        <span>桂林五日游</span>
      </div>
    </v-card-title>
    <v-tabs v-model="tab">
      <v-tab v-for="item in tabList" :key="item.componentName">{{item.name}}</v-tab>
    </v-tabs>
    <v-divider />
    <v-tabs-items v-model="tab">
      <keep-alive>
        <component v-bind:is="currentTabComponent" v-model="detailData"></component>
      </keep-alive>
    </v-tabs-items>
  </v-card>
</template>

<script>
import * as groupApi from '@/api/group'
import baseinfo from './baseinfo'
import tourist from './tourist'
import tourfee from './tour-fee'
import itinerary from './itinerary'
import guide from './guide'
import arrangement from './arrangement'
import payable from './payable'
import file from './file'
import statement from './statement'
export default {
  name: 'planDetail',
  components: {
    baseinfo,
    tourist,
    tourfee,
    itinerary,
    guide,
    arrangement,
    payable,
    file,
    statement
  },
  created() {
    this.setTab()
    this.__inited__ = false
  },
  activated() {
    if(this.__inited__) {
      this.setTab()
    }
  },
  deactivated() {
    this.__inited__ = true
  },
  computed: {
    currentTabComponent() {
      let name = this.tabList[this.tab]['componentName']
      this.$router.replace({path: '/op/detail', query: {id: this.id, cm: name}})
      return name
    }
  },
  data() {
    return {
      tab: '',
      id: undefined,
      tabList: [
        {
          name: '团期概况',
          componentName: 'baseinfo'
        },
        {
          name: '大交通 & 行程',
          componentName: 'itinerary'
        },
        {
          name: '安排 & 预订',
          componentName: 'arrangement'
        },
        {
          name: '游客名单',
          componentName: 'tourist'
        },
        {
          name: '导游',
          componentName: 'guide'
        },
        {
          name: '收入',
          componentName: 'tourfee'
        },
        {
          name: '支出',
          componentName: 'payable'
        },
        {
          name: '相关文件',
          componentName: 'file'
        },
        {
          name: '结算单',
          componentName: 'statement'
        }
      ],
      detailData: ''
    }
  },
  methods: {
    setTab() {
      let componentName = this.$route.query.cm
      this.id = this.$route.query.id
      if(componentName) {
        this.tab = this.tabList.findIndex(item => item.componentName == componentName) || 0
      } else {
        this.tab = 0
      }
      if (componentName != 'baseinfo') {
        this.getDetail()
      }
    },
    getDetail() {
      groupApi.getPlanDetail({id: this.id}).then(res => {
        this.detailData = res.data
      })
    },
  }
}
</script>

<style>

</style>